
import { BaseComp } from '../../../common/component/comp';

class TitleFrame extends BaseComp {
	// path 部分
	/** @type {string} Path */ pTopBound = null;
	/** @type {string} Path */ pBottomBound = null;
	/** @type {string} Path */ pBack = null;
	/** @type {string} Path */ pBackTexture = null;

	// sprite 部分
	/** @type Text */ spTitle = null;
	/** @type Path 上边框 */ spTopBound = null;
	/** @type Path 下边框 */ spBottomBound = null;
	/** @type Path 背景 */ spBack = null;
	/** @type Path 背景图案 */ spBackTexture = null;
	/** @type Path 背景图案 Clip */ spBackTexClip = null;

	// spBackTexture 动作参数
	backTexOffsetX = 18; backTexOffsetY = 18;

	constructor(args) {
		super(args.parent);

		// layout
		this.x = args.x;
		this.y = args.y;
		this.width = args.width;
		this.height = args.height;
		this.contentX = args.contentX;
		this.contentY = args.contentY;
		const w = this.contentWidth = args.contentWidth;
		const h = this.contentHeight = args.contentHeight;

		this.basePosition = [0, 0];

		this.title = '';
		this.colors = args.colors;
		/** @type {number} 动态部分的 z-index */ this.zlevel = args.zlevel; // 20
		/** @type {number} 静态部分的 z-index */ this.zlevelStatic = args.zlevelStatic; // 50

		this.div = this.initDom();
		this.zrender = args.zrender;
		this.zr = this.zrender.init(this.div);

		// path
		const o = 6; // offset
		const l = 2; // line size

		this.pTopBound =
			`M1 0H${w*0.2}l${o} ${o}H${w*0.8-o}l${o} -${o}H${w-1}`
			+ `V${l}H${w*0.8+l*2}l-${o} ${o}H${w*0.2+o-l*2}l-${o} -${o}H1z`;
		this.pBottomBound =
			`M1 ${h}H${w*0.2}l${o} -${o}H${w*0.8-o}l${o} ${o}H${w-1}`
			+ `v-${l}H${w*0.8+l*2}l-${o} -${o}H${w*0.2+o-l*2}l-${o} ${o}H1z`;
		this.pBack =
			`M1 0H${w*0.2}l${o} ${o}H${w*0.8-o}l${o} -${o}H${w-1}`
			+ `V${h}H${w*0.8+l*2}l-${o} -${o}H${w*0.2+o-l*2}l-${o} ${o}H1z`;
		{
			const texs = [];
			const a = 5, b = 3;
			for (let xx = 0; xx < 36; xx++) {
				for (let yy = 0; yy < 9; yy++) {
					const x = xx * this.backTexOffsetX - 6, y = yy * this.backTexOffsetY - 16;
					texs.push(`M${x} ${y}h${b}v${a}h${a}v${b}h-${a}v${a}h-${b}v-${a}h-${a}v-${b}h${a}v${a}z`);
				}
			}
			this.pBackTexture = texs.join('');
		}

		this.on(args.titleEventName, this.onTitleUpdated.bind(this));
	}

	initDom() {
		const main = document.getElementById('main');
		const content = document.createElement('div');
		const [x, y] = this.absolutePos();

		content.id = 'titleFrame';
		content.style.position = 'absolute';
		content.style.overflow = 'hidden';
		content.style.width = this.width + 'px';
		content.style.height = this.height + 'px';
		content.style.left = x + 'px';
		content.style.top = y + 'px';
		content.style.zIndex = this.zlevel + '';
		main.appendChild(content);
		return content;
	}

	init() {
		const { zrender, zr, contentWidth, contentHeight, title } = this;
		const relativePos = this.relativePos();
		const x = relativePos[0] + this.contentX;
		const y = relativePos[0] + this.contentY;

		this.spTitle = new zrender.Text({
			style: {
				text: title,
				textAlign: 'center',
				fontWeight: 'bold',
				textVerticalAlign: 'bottom',
				fontSize: 48,
				fontFamily: 'Microsoft YaHei UI',
				textFill: '#DDD',
				textShadowColor: this.colors.yellowNormal + "aa",
				textShadowBlur: 36,
				opacity: (title == '') ? 0 : 1
			},
			position: [x + contentWidth/2, y + contentHeight*0.7],
			z: 199, zlevel: this.zlevelStatic
		});
		zr.add(this.spTitle);

		// 上边、下边、底
		this.spTopBound = zrender.path.createFromString(
			this.pTopBound,
			{
				position: [x, y],
				style: {
					fill: this.colors.strokeNormal,
					shadowColor : this.colors.strokeBgL3,
					shadowBlur : 10,
				},
				z: 20, zlevel: this.zlevel
			}
		);
		this.spBottomBound = zrender.path.createFromString(
			this.pBottomBound,
			{
				position: [x, y],
				style: {
					fill: this.colors.strokeNormal,
					shadowColor : this.colors.strokeBgL3,
					shadowBlur : 10,
				},
				z: 20, zlevel: this.zlevel
			}
		);
		this.spBack = zrender.path.createFromString(
			this.pBack,
			{
				position: [x, y],
				style: {
					fill: new zrender.LinearGradient(
						0, 0, 0, 1,
						[
							{offset:0.08, color: this.colors.strokeBgL3},
							{offset:0.28, color: this.colors.strokeBgL1},
							{offset:0.72, color: this.colors.strokeBgL1},
							{offset:0.92, color: this.colors.strokeBgL3},
						]
					),
					opacity: 0.6
				},
				zlevel: this.zlevelStatic
			}
		);
		this.spBackTexClip = zrender.path.createFromString(
			this.pBack,
			{
				position: [0, 0],
				style: { fill: '#FFF' },
				zlevel: this.zlevelStatic
			}
		);
		this.spBackTexture = zrender.path.createFromString(
			this.pBackTexture,
			{
				position: [x, y],
				style: { fill: this.colors.strokeNormal, opacity: 0.4},
				zlevel: this.zlevelStatic, z: -1
			}
		);
		this.spBackTexture.setClipPath(this.spBackTexClip);
		zr.add(this.spTopBound);
		zr.add(this.spBottomBound);
		zr.add(this.spBack);
		zr.add(this.spBackTexture);
	}

	tick() {
		this.makeDirty(false);
	}

	paint() {
		const relativePos = this.relativePos();
		const x = relativePos[0] + this.contentX;
		const y = relativePos[0] + this.contentY;

		const progress = Date.now() % 3000 / 3000;
		this.spBackTexture.attr({
			position : [x - progress * 2 * this.backTexOffsetX, y - progress * this.backTexOffsetY]
		});
		this.spBackTexClip.attr({
			position : [progress * 2 * this.backTexOffsetX, progress * this.backTexOffsetY]
		});
	}

	onTitleUpdated(_, param) {
		const title = param.title;
		if (typeof(title) != 'string') {
			return;
		}
		this.title = title;

		this.spTitle.attr({
			style: {
				text: title,
				opacity: (title == '') ? 0 : 1
			}
		});
	}

	/**
	 * 因为它要上层 comp (desk) 执行过 onStyleLRUpdated, 这里的 absolutePos 才能算出正确答案
	 * 所以这个方法是 desk 调用的, 不是事件触发的.
	 */
	onStyleLRUpdated() {
		const x = this.absolutePos()[0];
		this.div.style.left = x + 'px';
	}
}

export {
	TitleFrame
};
